Así que estoy usando el diseño de hormigas (antd). He creado una tabla con paginación personalizada. Cada cambio de página se realiza una llamada a la API para recuperar un nuevo conjunto de datos.

Implementé con éxito un código que guarda mis casillas marcadas individuales al cambiar de página. Ejemplo: en la primera página, selecciono 3 casillas de verificación, luego voy a la segunda y marco 2 allí, luego voy a la tercera y marco 5 allí. Mi estado final asciende a 10 casillas marcadas y se muestran correctamente como marcadas en la tabla misma.

Lo siguiente que quiero lograr es lo mismo pero usando el botón marcar todo en la tabla antd. Quiero poder seleccionar todos los elementos de la primera página, luego ir al segundo y seleccionar todo, luego al tercero y seleccionar todo y guardarlo todo y mostrarlo en las páginas de la tabla.

Se debe compartir el estado para la comprobación individual y la comprobación de todos.

Mi estado de teclas seleccionadas:

 const [selectedRowKeys, setSelectedRowKeys] = useState([]);

Mi selección de fila

 const onSelectChange = (row) => { setSelectedRowKeys((prevKeys) => [...prevKeys, row]); }; const rowSelection = { selectedRowKeys: selectedRowKeys.map((item) => item.id), //error line preserveSelectedRowKeys: true, onSelect: (row, selected, selectedRows) => { if (selected) { onSelectChange(row); setSelectedRow(selectedRows); } else { setSelectedRowKeys((prevKeys) => prevKeys.filter((key) => key.id !== row.id) ); } }, onSelectAll: (selected, row, selectedRows) => { if (selected) { setSelectedRowKeys(row); //not sure im doing the right thing here setSelectedRow(selectedRows); } else { //dont know what to put here } }, };

El problema llega después de revisar todo en la primera página y pasar a la segunda. Cuando trato de verificar todos los elementos allí, la aplicación se rompe y obtengo errores como no puedo leer la identificación de undefined en la línea //error y prácticamente en todas partes donde tengo que mapear sobre selectedRowKeys.